<template>
	<view>
		<view class="upperBackgroundClass">
			<view class="teacherImgClass">
				<image :src="teacherInfoData.photo" class="teacherHeadClass"></image>
				<view class="teacherNameClass" style="">{{teacherInfoData.full_name}}</view>
				<view class="belowCla">
					<view>{{specialty}}</view>
					<view class="lineCla" style=""></view>
					<view>{{mechanism_name}}</view>
					<view class="lineCla"></view>
					<view>教龄:{{master_age}}</view>
				</view>
			</view>
			<view class="detailsCon">
				<van-tabs active="a" animated  swipeable title-active-color="#FF7301" color="#FF7301" @change="change">
				  <van-tab title="个人简介" name="a">
					  <view :style="{height: height}" class="list">
						  <laoshi :canSlide="canSlide" v-if="standard === 0" :standard="standard" @Value="Value" :introduction_content="introduction_content"></laoshi>
					  </view>
				  </van-tab>
				  <van-tab title="在授课程" name="b" >
					  <view :style="{height: height}" class="list">
						  <laoshi :canSlide="canSlide" v-if="standard === 1" :standard="standard" @Value="Value" :mechanismData="mechanismData"></laoshi>
					  </view>
				  </van-tab>
				  <van-tab title="用户评价" name="c">
					  <view :style="{height: height}" class="list">
						  <laoshi :canSlide="canSlide" v-if="standard === 2" :standard="standard" @Value="Value"></laoshi>
					  </view>
				  </van-tab>
				</van-tabs>
			</view>
		</view>
	</view>
</template>
<script>
	import laoshi from '@/pages/jigou/laoshi'
	export default {
		components: {
			laoshi
		},
		
		data() {
			return {
				teacherInfoData: {},
				mechanism_name: "",
				specialty: "",
				master_age: "",
				canSlide: false,
				standard: 0,
				height: "",
				introduction_content: "",
				mechanismData: []
			}
		},
		
		onPageScroll() {
			this.obtainHeightFun()
		},
		
		methods: {
			Value(index) {
				this.height = index + "vh"
			},
			
			obtainHeightFun() {
				let query = uni.createSelectorQuery()
				query.select('.detailsCon').boundingClientRect((rect) => {
					if(rect.top < 0){
						this.canSlide = true
					}else {
						this.canSlide = false
					}
				}).exec()
			},
			
			change(index) {
				this.standard = index.target.index
			},
			
			teacherInfoQuery(itme) {
				this.$myRequest({
					url: "/masterInfo/findById",
					data: {
						id: itme
					}
				}).then((res) => {
					this.teacherInfoData = res.data
					this.specialty = res.data.specialty
					this.master_age = res.data.master_age
					this.mechanismGoods(res.data.mechanism_id)
					this.mechanismDetails(res.data.mechanism_id)
					this.introduction_content = res.data.introduction_content
	 			})
			},
			
			mechanismGoods(id) {
				this.$myRequest({
					url: "/masterSetPrice/queryCourseListPage",
					data: {
						mechanism_id: id,
						type: "mechanism_offline",
						status: 2
					}
				}).then((res) => {
					res.data.forEach((itme) => {
						itme.newTitle = "【" + itme.course_num + "节】" + itme.title
					})
					this.mechanismData = res.data
				})
			},
			
			mechanismDetails(id) {
				this.$myRequest({
					url: "/mastermechanism/findById",
					data: {
						id: id
					}
				}).then((res) => {
					this.mechanism_name = res.data.mechanism_name
				})
			}
		},
		
		onLoad(option) {
			this.teacherInfoQuery(option.teacherId)
		}
	}
</script>
<style lang="scss" scoped>
	.list {
		border-top: 0.5rpx solid #BFBFBF;
		margin-top: 5rpx;
	}
	.detailsCon {
		position: absolute;
		height: 95vh;
		background: red;
		background: #FFFFFF;
		position: relative;
		height: 100vh;
		width: 750rpx;
		top: 500rpx;
		border-radius:30rpx 30rpx 0 0;
	}
	.upperBackgroundClass {
		width: 750rpx;
		height: 629rpx;
		background: #FF9B20;
		position: relative;
		
		.teacherImgClass {
			.teacherHeadClass {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				border: 0.01rpx solid #F5F5F5;
				position: absolute;
				top: 67rpx;
				left: 295rpx;
				z-index: 12;
			}
			.teacherNameClass {
				font-size: 50rpx;
				width: 750rpx;
				text-align: center;
				font-weight: bold;
				letter-spacing: 1rpx;
				margin-top: 10rpx;
				color: #FFFFFF;
				position: absolute;
				top: 240rpx;
			}
			.belowCla {
				display: flex;
				justify-content: space-between;
				width: 600rpx;
				align-items: center;
				font-size: 30rpx;
				color: #FFFFFF;
				margin-left: 75rpx;
				position: absolute;
				top: 350rpx;
				.lineCla {
					height: 30rpx;
					width: 2rpx;
					background: #FFFFFF;
				}
			}
		}
		
	}
</style>